<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script src="../layui/layui.all.js"></script>
    <script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>
<div class="layui-container">
<!--<form class="layui-form" action="">-->
    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="layui-form-label">单行输入框</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-input-block">&ndash;&gt;-->
            <!--&lt;!&ndash;<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="layui-form-label">验证必填项</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-input-block">&ndash;&gt;-->
            <!--&lt;!&ndash;<input type="text" name="username" lay-verify="required" lay-reqtext="用户名是必填项，岂能为空？" placeholder="请输入" autocomplete="off" class="layui-input">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->

    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-inline">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="layui-form-label">验证手机</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-input-inline">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-inline">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="layui-form-label">验证邮箱</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-input-inline">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="text" name="email" lay-verify="email" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->

    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-inline">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="layui-form-label">多规则验证</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-input-inline">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="text" name="number" lay-verify="required|number" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-inline">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="layui-form-label">验证日期</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-input-inline">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="text" name="date" id="date" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-inline">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="layui-form-label">验证链接</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-input-inline">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="tel" name="url" lay-verify="url" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->

    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="layui-form-label">验证身份证</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-input-block">&ndash;&gt;-->
            <!--&lt;!&ndash;<input type="text" name="identity" lay-verify="identity" placeholder="" autocomplete="off" class="layui-input">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="layui-form-label">自定义验证</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-input-inline">&ndash;&gt;-->
            <!--&lt;!&ndash;<input type="password" name="password" lay-verify="pass" placeholder="请输入密码" autocomplete="off" class="layui-input">&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->

    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-inline">&ndash;&gt;-->
            <!--&lt;!&ndash;<label class="layui-form-label">范围</label>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-input-inline" style="width: 100px;">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-form-mid">-</div>&ndash;&gt;-->
            <!--&lt;!&ndash;<div class="layui-input-inline" style="width: 100px;">&ndash;&gt;-->
                <!--&lt;!&ndash;<input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">&ndash;&gt;-->
            <!--&lt;!&ndash;</div>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->

    <!--&lt;!&ndash;<div class="layui-form-item">&ndash;&gt;-->
        <!--&lt;!&ndash;<label class="layui-form-label">单行选择框</label>&ndash;&gt;-->
        <!--&lt;!&ndash;<div class="layui-input-block">&ndash;&gt;-->
            <!--&lt;!&ndash;<select name="interest" lay-filter="aihao">&ndash;&gt;-->
                <!--&lt;!&ndash;<option value=""></option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="0">写作</option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="1" selected="">阅读</option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="2">游戏</option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="3">音乐</option>&ndash;&gt;-->
                <!--&lt;!&ndash;<option value="4">旅行</option>&ndash;&gt;-->
            <!--&lt;!&ndash;</select>&ndash;&gt;-->
        <!--&lt;!&ndash;</div>&ndash;&gt;-->
    <!--&lt;!&ndash;</div>&ndash;&gt;-->


    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">单行选择框</label>-->
        <!--<div class="layui-input-block">-->
            <!--<select name="interest" lay-filter="aihao">-->
                <!--<option value=""></option>-->
                <!--<option value="0">写作</option>-->
                <!--<option value="1" selected="">阅读</option>-->
                <!--<option value="2">游戏</option>-->
                <!--<option value="3">音乐</option>-->
                <!--<option value="4">旅行</option>-->
            <!--</select>-->
        <!--</div>-->
    <!--</div>-->



    <!--&lt;!&ndash;<div class="layui-form-item layui-form-text">-->
      <!--<label class="layui-form-label">编辑器</label>-->
      <!--<div class="layui-input-block">-->
        <!--<textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea>-->
      <!--</div>-->
    <!--</div>&ndash;&gt;-->
    <!--<div class="layui-form-item">-->
        <!--<div class="layui-input-block">-->
            <!--<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>-->
            <!--<button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
        <!--</div>-->
    <!--</div>-->
<!--</form>-->
<!--<script>-->
    <!--layui.use(['form', 'layedit', 'laydate'], function(){-->
        <!--var form = layui.form-->
            <!--,layer = layui.layer-->
            <!--,layedit = layui.layedit-->
            <!--,laydate = layui.laydate;-->

        <!--//日期-->
        <!--laydate.render({-->
            <!--elem: '#date'-->
        <!--});-->
        <!--laydate.render({-->
            <!--elem: '#date1'-->
        <!--});-->

        <!--//创建一个编辑器-->
        <!--var editIndex = layedit.build('LAY_demo_editor');-->

        <!--//自定义验证规则-->
        <!--form.verify({-->
            <!--title: function(value){-->
                <!--if(value.length < 5){-->
                    <!--return '标题至少得5个字符啊';-->
                <!--}-->
            <!--}-->
            <!--,pass: [-->
                <!--/^[\S]{6,12}$/-->
                <!--,'密码必须6到12位，且不能出现空格'-->
            <!--]-->
            <!--,content: function(value){-->
                <!--layedit.sync(editIndex);-->
            <!--}-->
        <!--});-->

        <!--//监听指定开关-->
        <!--form.on('switch(switchTest)', function(data){-->
            <!--layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {-->
                <!--offset: '6px'-->
            <!--});-->
            <!--layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)-->
        <!--});-->

        <!--//监听提交-->
        <!--form.on('submit(demo1)', function(data){-->
            <!--layer.alert(JSON.stringify(data.field), {-->
                <!--title: '最终的提交信息'-->
            <!--})-->
            <!--return false;-->
        <!--});-->

        <!--//表单赋值-->
        <!--layui.$('#LAY-component-form-setval').on('click', function(){-->
            <!--form.val('example', {-->
                <!--"username": "贤心" // "name": "value"-->
                <!--,"password": "123456"-->
                <!--,"interest": 1-->
                <!--,"like[write]": true //复选框选中状态-->
                <!--,"close": true //开关状态-->
                <!--,"sex": "女"-->
                <!--,"desc": "我爱 layui"-->
            <!--});-->
        <!--});-->

        <!--//表单取值-->
        <!--layui.$('#LAY-component-form-getval').on('click', function(){-->
            <!--var data = form.val('example');-->
            <!--alert(JSON.stringify(data));-->
        <!--});-->

    <!--});-->
<!--</script>-->
<form class="layui-form" action="">
    <div class="layui-form-item" style="">
        <label class="layui-form-label">选择框</label>
        <div class="layui-input-block">
            <select name="city" lay-verify="required" lay-filter="type" id="category" name="category">
                <option value="9"></option>
                <option value="0">北京</option>
                <option value="1">上海</option>
                <option value="2">广州</option>
                <option value="3">深圳</option>
            </select>
        </div>
    </div>
</form>
    <div style="width: 300px">
<div id="div1">
    <p>请书写帖子具体内容</p>
    <!--<%&#45;&#45;<p>欢迎使用 wangEditor 富文本编辑器</p>&#45;&#45;%>-->
</div>
        <textarea id="text1" style="width:100%; height:100%;display: none;" ></textarea>

    </div>

</div>
<script type="text/javascript" src="wangEditor.js"></script>
<script type="text/javascript">
    var E = window.wangEditor
    var editor = new E('#div1')
    var $text1 = $('#text1')
    editor.customConfig.onchange = function (html) {
        // 监控变化，同步更新到 textarea
        $text1.val(html)
    }
    //开启debug模式
    editor.customConfig.debug = true;
    // 关闭粘贴内容中的样式
    editor.customConfig.pasteFilterStyle = false
    // 忽略粘贴内容中的图片
    editor.customConfig.pasteIgnoreImg = true
    // 上传图片到服务器
    editor.customConfig.uploadFileName = 'photo'; //设置文件上传的参数名称
    editor.customConfig.uploadImgServer = '/forum/post/upload'; //设置上传文件的服务器路径
    editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024; // 将图片大小限制为 3M
    //自定义上传图片事件
    editor.customConfig.uploadImgHooks = {
        before : function(xhr, editor, files) {

        },
        success : function(xhr, editor, result) {
            console.log("上传成功");
        },
        fail : function(xhr, editor, result) {
            console.log("上传失败,原因是"+result);
        },
        error : function(xhr, editor) {
            console.log("上传出错");
        },
        timeout : function(xhr, editor) {
            console.log("上传超时");
        }
    }


    editor.create()
    let eds = document.getElementsByClassName('w-e-text-container')
    eds[0].style = eds[0].style.cssText + 'height: 700px'
    $text1.val(editor.txt.html())

    // document.getElementById('btn1').addEventListener('click', function () {
    //     // 读取 html
    //     alert(editor.txt.html())
    // }, false)

    // document.getElementById('btn2').addEventListener('click', function () {
    //     // 读取 text
    //     alert(editor.txt.text())
    // }, false)
</script>

<button id="btn" onclick="subit()">123</button>
<script>
    // $.ajax({
    //     url:"/forum/post/selectAllBrandName",
    //     success:function (data) {
    //         var html = "";
    //         for (var i = 0; i < data.length; i++){
    //             html = html + "<option value=\"" + data[i].brandName + "\">";
    //             html = html + data[i].brandName + "</option>";
    //
    //         }
    //         console.log(html);
    //         $('#category').html(html)
    //         layui.use('form', function(){
    //             var form = layui.form;
    //             form.render('select');
    //         });
    //     }
    //
    // })
</script>

<script>
    function subit() {
        var tag = $('#category option:selected').val();
        console.log(tag)
        // layui.on('select(type)',function (data) {
        //     category = data.value;
        //     type = data.elem[data.elem.selectedIndex].text;
        //     console.log(type)
        //     form.render('select')
        // })
    }
</script>
<script>

    layui.use('form', function(){
        var form = layui.form;
        form.render();
    });

    // layui.on('select(type)',function (data) {
    //     category = data.value;
    //     type = data.elem[data.elem.selectedIndex].text;
    //     console.log(type)
    //     form.render('select')
    // })
</script>
<!--<script>-->
    <!--//JavaScript代码区域-->
    <!--layui.use('element', function(){-->
        <!--var element = layui.element;-->
    <!--});-->
<!--</script>-->
<!--<script>-->
    <!--layui.use('form',function () {-->
        <!--var form=layui.form;-->
    <!--});-->
<!--</script>-->
</body>
</html>